<template>
	<view class="">
		<view class="pay_list_box">
			<radio-group @change="radioChange">
				<label class="pay_list">
					<view class="l_box">
						<view class="top">
							<view>微信</view>
						</view>
					</view>
					<view class="r_radio">
						<radio value="1" color="#44bb53" style="transform:scale(0.8)" />
					</view>
				</label>
				<label class="pay_list">
					<view class="l_box">
						<view class="top">
							<view>支付宝</view>
						</view>
					</view>
					<view class="r_radio">
						<radio value="2" color="#44bb53" style="transform:scale(0.8)" />
					</view>
				</label>
			</radio-group>
		</view>
		<view class="zf_btn" @click="pay">提交</view>
	</view>

</template>

<script>
	export default {
		data() {
			return {
				imgs: [],
				pay_type: 0,
				id: 0,
				info: []
			}
		},
		onLoad(response) {
			console.log(response)
			this.id = response.id
			// this.servicesInfo()
		},
		methods: {
			radioChange(e) {
				// 获取用选择的支付方式
				this.pay_type = e.detail.value
				console.log(this.pay_type)
			},
			//一、获取订单信息
			// servicesInfo: function() {
			// 	var that = this;
			// 	// 请求订单信息接口
			// 	that.$http.post("User/servicesInfo", {
			// 			'id': that.id
			// 		})
			// 		.then(function(response) {
			// 			that.info = response.data;
			// 			console.log(response);
			// 		});
			// },

			//二、获取服务信息和支付配置信息
			pay: function() {
				var that = this;
				if (that.pay_type == 0) {
					uni.showToast({
						title: "请选择支付方式",
						icon: "none"
					})
					return;
				}
				var url = 'https://api.mch.weixin.qq.com/pay/orderquery';
				// 1 微信支付；2 支付宝支付
				if (that.pay_type == 1) {
					url = 'Order/wxpay';
				} else if (that.pay_type == 2) {
					url = 'Order/alipay';
				}
				// 请求服务信息和支付配置信息
				that.$http.post(url, {
					'id': that.id,
					type: that.pay_type,
					'price': that.info.pay_price,
					'order_sn': that.info.order_sn
				}).then(function(response) {
					console.log(response);
					// 调用支付
					that.appPay(response.data, that.pay_type);
				});
			},
			// 三、支付
			// appPay: function(data, type) {
			// 	var that = this;
			// 	let pay_type = type == 1 ? 'wxpay' : 'alipay'
			// 	// 发起支付
			// 	uni.requestPayment({
			// 		provider: pay_type,
			// 		orderInfo: data.order_info, //微信、支付宝订单数据
			// 		success: (res) => {
			// 			// 支付成功，改变订单状态
			// 			that.updateOrder(data.out_trade_no, type)
			// 		},
			// 		fail: (err) => {
			// 			uni.showToast({
			// 				title: '支付失败',
			// 				'icon': 'none'
			// 			})
			// 		}
			// 	})
			// },
			//四、修改务订单状态
			// updateOrder: function(order_no, type) {
			// 	var that = this;
			// 	that.$http.post('Order/updateOrder', {
			// 			order_no: order_no
			// 		})
			// 		.then(function(response) {
			// 			uni.showToast({
			// 				title: "支付成功",
			// 				icon: 'none',
			// 				duration: 2000
			// 			})

			// 		})
			// },
		}
	}
</script>

<style scoped lang="scss">
	.zaixian {
		padding-bottom: 100rpx;
		border-top: 1px solid #ebebeb;

		.content {
			.money {
				padding-top: 50rpx;
				text-align: center;
				height: 200rpx;
				color: #F05D31;
				line-height: 200rpx;
				font-size: 100rpx;
			}

			.time {
				text-align: center;
				color: #a5a5a5;
				font-size: 28rpx;
			}
		}

		.code {
			padding: 0 20rpx;
			display: flex;

			.shoukuanma {
				text-align: center;
				width: 50%;
				height: 200rpx;

				.type {
					font-size: 30rpx;
					color: #3b3b3b;
				}

				.ty_img {
					width: 200rpx;
					height: 200rpx;
				}
			}
		}

		.pay_list_box {
			margin-top: 100rpx;

			.yinhangka {
				font-size: 30rpx;
				color: #3b3b3b;
				padding: 0 20rpx;
				display: flex;
				height: 100rpx;
				align-items: center;
				justify-content: space-between;
				border-bottom: 1px solid #ebebeb;

				.y_left {
					display: flex;

					.name {
						padding-right: 20rpx;
					}
				}
			}

			.pay_list {
				border-bottom: 1px solid #ebebeb;
				padding: 0 20rpx;
				height: 100rpx;
				align-items: center;
				display: flex;
				justify-content: space-between;

				.l_box {
					height: 100rpx;

					.top {
						height: 100rpx;
						display: flex;
						height: 100rpx;
						align-items: center;
						font-size: 30rpx;
						color: #3b3b3b;

						.t_img {
							padding-right: 20rpx;
							width: 46rpx;
							height: 38rpx;
						}

						.t_img1 {
							padding-right: 32rpx;
							width: 34rpx;
							height: 33rpx;
						}

						.t_img2 {
							padding-right: 28rpx;
							width: 38rpx;
							height: 33rpx;
						}
					}
				}
			}
		}

		.pingzheng {
			margin-top: 30rpx;

			.content {
				display: flex;
				align-items: center;
				padding: 0 20rpx;
				height: 200rpx;

				.shangchuan {
					color: #454545;
					font-size: 30rpx;
				}

				.sc_img {
					padding-left: 20rpx;
					width: 200rpx;
					height: 200rpx;
					border-radius: 5px;
				}
			}

			.pz_pic {
				margin-top: 30rpx;
				padding: 0 20rpx;

				.pz_img {
					width: 100%;
					height: 300rpx;
				}
			}
		}

		.zf_btn {
			margin: 100rpx auto 0;
			background-color: #44bb57;
			width: 650rpx;
			height: 90rpx;
			font-size: 36rpx;
			color: #FFFFFF;
			line-height: 90rpx;
			text-align: center;
			border-radius: 45rpx;
		}
	}
</style>
